Membahas widget ListView 

Sebelum itu membuat item dari atas kebawah yg memnuhi layar 
Sebelumnya mempunya container kosong 

Body: container ( 

Padding: Edgelnsert.all(20) 

Child : column : ( 

Agar widget kita dari atas kebawah 

Children : [ 

Container( 

Width: 100, 

Color : color.blue, 

Child: Text( “Item”), 

Padding: Edgelnsert.all(10), 

] 

Sebelum children di container kasi lebar memnuhi layar 

Width: double.infinity, 

Maka dia ketengah 

Kasih margin di children 

Margin: edgelnsret.only(bottom:20), 

Maka ada jarak 

Lalu kita copy banyak 

Maka terus ada eror 

Karena kita memakai widget column dia tidak boleh melebih batas layar 
Gk bisa discroll berate eror 

Bisa diganti dgn widget 

ListView 

Sekarang maka bisa di scroll 

Ketika pakai listview lebar memnuhi layar 

Container yg ini width tidak pengaruh Ketika di hapus width tetap saja tidak 
pengaruh 

Maka tidak ada eror sama sekali 

Dia otomatis memnuhi layar 

Atau memenuhi induk dari listview induk nya yaitu container 

Yg double.infinty atau memenuhi layar 

Listview mengikuti dari container 

Itu tentang listview 

Listview bisa mengatur dari atas kebawh 

Kita pingin scroll secara horizontal dia mempunya property 
scrollDrirection: Axis.horizontal, 

default nya vertical 

tadi default .vertical lebar akan memnuhi layar atau dari induk nya 
horizontal sebalik nya tinggi nya mengikuti induk sekarang bisa menentukan induk 
nya 

height: 200 

jadi tinggi listview mengikuti induknya 

itu mengenai widget list view 

coba kuranhi container bikin 3 saja 


bikin secara vertical saja kita hapus dan default 

kita kasih heightnya tadi 

sekarang height 200 

dan container di tambahkan 

sekarang bisa discrol hanya tinggi 200 saja 

listView bukan hanya widget ada punya property builder 
builder sering dipakai 

container isi kita cut satu sisa nya hapus 

jadi container body childnya Listtview.builder(itemBuilder: ) 
disorot yg harus dipakai itembuilder itu apa 

ini isi sebuah function yg menreturn widget yg ditampilkan 
jadi itembuilder isi nya function 

seperti ini anonymous functuion 

memiliki 2 parameter contets dan index 

0453) 

Ambil context nya dari widget build 

Kemudian index , i 

Maka dia menreturn 

Return Container yg tadi kita buat 

Return Container ( 

paste 

); 

Maka dia akan menjadi unlimetide builder 

Karena ini belum kita kasih satu buah property lagi 
itemCount: 3, 

adalah membutuhkan interger menentukan jumlah dari list kita 
kasih 3 maka list nya hanya 3 tapi jika 5 maka jadi 5list 
maka dia wajib menentukan jumlah list 

sama builder menentukan isi nya apa 


body: Container( 
padding: EdgeInsets.all(20), 
width: double.infinity, 
height: 200, 
Child: ListView.builder 
itemBuilder: (context, i) i 


return Container( 


margin: EdgeInsets.only( bottom: 20), 


color: MColors.blue, 


child: Text( "item" 
padding: 
d: 
padding: EdgeInsets.all(20 
J; 
F; 


itemCount: 7, 


Kali in membahas tentang stateless dan statefull 
Diawal sudah memabahs tentang ada 2 jenis widget stateless dan statefull 
Ketika kita membuat class kita harus extends StatelessWidget dia ada dua statefull 


Stateless dia bersifat imutebel tdak bisa beruubah 
Sebelum masuk stateless dan statefull 
Bahas state ap aitu 
State itu sebuah property atau variable 
Ketika kita buat class ada property nya 
Contoh 
Int number: 
Maka ini adalah state 
Jadi guna stateless bersifat tidak bisa berubah 
Misal kan punya number nilainya 0 ubah jadi 1 maka tidak bisa berubah dilayar 
Cth 
Int number — 0: pindahkan ke class 
Maka sudah membuat property number 0 
Maka buat di body 
Center( 
Child: column( 
mainAxisalignment: mainaxisalignment.center, 
children: [ 
Text(number.totstring()) 
Kan number bertipe string maka kita ubah jadi string 
Dibawah nya buat widget botton 
ElevatedButton(onPressed: (){}, child: text(“Increment”)) 
Membuat button ini dia ada property wajib 
Maka sudah punya button 
onPrassed itu Ketika button diklik dia mau ngapain 
child: isinya ap akita isi berupa text 
untuk text terlalu kecil tambahakn style 
„style: textStyle(fonsize: 30), 
Jadi saya ingin di increment maka nilai berubah menjadi satu 
] 
Jadi child bagaimaina kita sudah punaya state yaout number 
Ketika button di klik maka number bertambh 1 
onPressed: (){ 
number += 1; 
lalu kita print(number); 
} 
Lihat Ketika diklik maka akan berubah menjadi satu 
Diconsole sudah berubah saru tapi di tampilan tidak 
Karena kita memakai nama ya statelessWidget 
Maka tidak berubah disini 
Jadi kita bisa berubah stateless menjadi statefull 
Caranya 
Arahkan stateless tekan ctrl . lalu pilih convert to statefullwidget 
Jadi dia menambahkan class baru statefull widget 
Dan kita save maka eror karena kita harus merestart dahulu 
Ketika merubah stateless ke statefull maka harus merestart 
Klik tanda hijau 


Sekarng bisa 

Ketika klik sudah bertambah tapi di tampil belum berubah 

Karena kita merender ulang dia harus mengunakan 

SetStatel) 

Tarus di onPressed: () 4 

Diawal 

Lalu kita save 

Setstate itu Ketika kita klik button ini maka dia menrender semua layarnya 
Setstate ini menreder ulang 

Jadi setsate ini menbutuhkan function 

Jadi number bisa dimasukan kedalam function berikt 

(number += 1;} 

); 

Maka dia masih bisa berfungsi ini adalah memain mengunakan state 
Jadi Ketika kita menguanakan statefull bisa merubah dilayar 

Tapi mengunakan sateless tidak bisa 


Navigator 

Membuat aplikasi fluter baru 

Membuat aplikasi tidak mungkin mempunya satu halaman pasti lebih dari 1 
Untuk memindah kan satu ke satu yg lain 

Memindahkan ke halaman maka 

Home: kita pisahkan scfaffod kita pisahkan 

Arahkan scaffolf klik kanan refactor exrat widget 

Maka buat 

PageSatu 


Jadi home ini widget pagesatu 
Artinya kita membuat widget 

Jadi ini widget kita 

Home ini menreturn sebuah pagesatu 


Maka ini untuk page Satu 


Maka kita membuat pagedua 

Di lib 

Page dua.dart 

Maka sudah membuat halaman page dua 

Maka di body center child text (ini halaman dua) 
Appbar halaman dua 


Ini kita focus page satu dahulu 

Page satu kita buat 

Body: center( 

Child: elevatedButton(onPrassed: () {}, 


Onprassed nanti dulu 

Child: Text( “Pindah ke halaman 2”) 

) 

Maka button diklin pindahke halaman 2 

Caranya 

Di onprassed {} 

Mengunakan sebuah navigator 

Navigator. Maka banyak nanti akan dibahas sekarang yg focus dgn push 
Push ini menambahkan sebuah halaman diatas page Satu 
Kita sudah buat page dua ini menumpuk ke halaman 1 diatas 
Cara mengunakan push untuk menumpuk halaman 1 dan 2 
Push punya 2 parameter context dan rott 

Navigator.push() 

Untuk context kita ambil dari build widget 

Yg kedua kita akan membuat route ini mengunakan 
materialPageRoutel) 

diamembutuhkan property builder: 

property bulder dia mereturn widget berisi function 

widget ini halaman yg ingin kita pindah 

widget ini berupa page dua 

caranya kita buat mengunakan comtext 

builder : (context) => PageDual) 

untuk mereturn mengunakan => 

maka sudah mereturn pageDua 

maka otomatis sudah men import page dua 

save 

jalankan 

jika diklik sudah ke halaman 2 

ini kalau dilihat dia menumpuk halaman 1 

dia timbul dari bawah 

jadi yg diatas merupakan tumpukan 

mengunakan metode push itu menumpuk 

Kembali page 2 ini diambil lagi yg muncul page Satu 

Itu mengunakan push 

Tapi berbeda dgn 

pushReplacement( 

maka disini menumpuk halaman satu 

jika Kembali dia tidak bisa 

karena pushPlacement dia menumpuk tapi mengantikan juga 
Ketika menumpuk maka page satu dibuang diganti page dua 
Maka kita ulang lagi aplikasinya 

Kita run Kembali 

Ini mengunakan pushplacement menumpuk mengantikan tapi tidak bisa Kembali 
lagi 

Push untuk menumpuk tanpa mengantikan 


Kemudian 


Dipage dua kita ganti 

Child: column( 

Children: (Text(Ini halaman satu), 
ElevatedButton(onPrased () {}, 

Child: Text( “Kembali”)) 

Kita masih mengunakan sebuah pushpalcement 
Dia berpindah tidak bisa Kembali maka dia sudah merefeseh 
Untuk halaman dua 

Column nya 

Kita kasih 

maiAxisAlignmen.center 


ini sudah membahas dua 

kita ganti push manjadi push biasa maka kita restart dahulu matikan hiduplagi 
tombol Kembali ke page Satu untuk Kembali 

mengunakan navigator.pop(context), 

hanya membutuhkan 1 paramter context 

artinya pop membuang seperti Kembali biasa 

untuk membuang halaman terkait 


berikutnya kita membahas pushreplacenamed,pushnamed 
itu dibahas ketika belajar routing 
berikutnya belajar mengenai root 


melanjutkan materi tenetang navigation 

sebelum sudah membuat navigasi dua halaman 
halaman satu dan halaman dua 

halama satu bisa berpindahkan ke halaman dua 
mengunakan push 

halaman dua ke halaman satu Kembali mengunakana 
navigator pop untuk membuang halamannya 


kita membahas sebuah router 

navigator pasti mengunakan router agar lebih mudah menage nya 
disini page satu akan dipindahkan ke file baru untuk page Satu 
class pageSatu pindahkan 

page satu.dart 

save 

kemudian kita import material nya di 

statelesswidget arahkan terus import material.dart 

save 

jadi main.dart ini 

di pagesatu PageDual) import page dua 

oke 

lalu main 


pageSatu kita import 
save maka masih bisa jalan 
hanya pindahkan pagesatu ke file baru 
lalu membahas route 
untuk route taruh di widget MaterialApp/( 
materialApp mempunyai property routes: 
routes ini memintah sebuah map 
routes isi tipe datanya map 
Map ini key nya string dan value nya function yg didalamnya adalah 
Menreturn sebuah class dari tampilan 
PageSatul() taruh di routes ini 
Jadi pagesatu mempunyai routes: { 
'page satu' : (context) => PageSatul), 
} 
Ini nama routes membuat page Satu 
Tipenya map 
'page satu': ini adalah key nya 
Lalu value Yg membutuhkan context lalu menruturn PageSatul() 
Maka sudah mempunyai satu route untuk page Satu 
Kemudian kita buat routes kedua untuk page kedua 
'page dua' : (context)=> PageDual), 
Maka kita sudah mempunya dua routes 
Kemudian di page satu.dart 
Ketika pindah tombol halaman kedua ini di klik mengunakan 
Navigator.push kita ganti bisa mengunakan 
Navigator.pusnamedl() 
Dia memakai nama routes tinggal taruh routes name nya apa 
(context, “page dua”), 
Jadi ini lebih simple dari pada yg tadi 
Tadi mengunakan widget material page route 
Tapi ini mengunakan nama route nya 
Lalu kita save 
Lalu kita restart 
Klik kehalaman dua maka 
Maka tetap sama saja kita ganti push dgn pushNamed 
Kemudain ada juga 
pushReplacementNamed ini sama untuk menumpuk dan mengantikan tapi 
metodenya 
mengunakan routes 
jadi save 
kehalaman dua lalu Kembali maka hilang. Halaman satu sudah dibuang 
itu mengenai routes push dgn puhNamed 
ini Ketika memakai routes 


